<template>
    <div class="cart">
        <Tiop></Tiop>
        <!-- 商品列表 -->
        <div class="goods">
            <van-swipe-cell v-for="item in cartList" :key="item.id">
                <div class="item">
                    <van-checkbox v-model="item.checked" />
                    <van-card :num="item.number" :price="item.price | TWO" :title="item.name" class="goods-card"
                        :thumb="item.pic" />
                    <van-stepper v-show="edit" v-model="item.number" theme="round" button-size="22" disable-input />
                </div>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="delList(item.id)" />
                </template>
            </van-swipe-cell>
        </div>
        <!-- 提交 -->
        <div class="btn">
            <van-submit-bar :price="sum" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked" @click="checkedAll">全选</van-checkbox>
                <template #tip>
                    累计共 <span>{{ cartTotal.goodsCount }}</span> 件商品，可点击<van-button :type="edit ? 'primary' : 'warning'"
                        size="mini" @click="edit = !edit">{{ edit?'保存': '修改' }}</van-button>按钮进行商品数量修改
                </template>
            </van-submit-bar>
        </div>

        <!-- 加载动画 -->
        <Location :show="show"></Location>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
// import { getCart } from '@/api/home.js';
import Tiop from '@/components/AppTiop';
import Location from '@/components/Location'
export default {
    components: {
        Tiop,
        Location,
    },
    data() {
        return {
            show: true,
            checked: false,
            cartList: [],
            cartTotal: {},
            edit: false
        }
    },
    methods: {
        onSubmit() {
            Toast.fail('功能开发中! 未来可期');
        },
        checkedAll() {
            this.cartList.forEach(item => {
                item.checked = this.checked
            })
        },
        delList(id) {
            Dialog.confirm({
                title: '删除',
                message: '是否要删除商品?',
            })
                .then(() => {
                    // on confirm
                    let index = this.cartList.findIndex(item => item.id == id);
                    this.cartList.splice(index, 1)
                    localStorage.setItem('mycart', JSON.stringify(this.cartList))
                    Toast.success('删除成功');
                })
                .catch(() => {
                    // on cancel
                });


        }
    },
    computed: {
        sum() {
            return this.cartList.reduce((pre, cur) => {
                if (cur.checked) {
                    return pre + cur.number * cur.price
                } else
                    return pre
            }, 0) * 100
        }
    },
    watch: {
        cartList: {
            deep: true,
            immediate: true,
            handler(val) {
                let cout = val.reduce((pre, cur) => {
                    if (cur.checked)
                        return pre + 1
                    else
                        return pre
                }, 0)
                this.checked = (cout == val.length)
            }
        }
    },
    async created() {
        // let res = await getCart()
        // this.cartList = res.data.data.cartList
        // this.cartTotal = res.data.data.cartTotal
        this.show = false
        this.cartList = JSON.parse(localStorage.getItem('mycart') || '[]')
        console.log(this.cartList);
    }
}
</script>

<style lang="less" scoped>
.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}

.cart {
    margin-bottom: 50px;

    .item {
        display: flex;
        position: relative;
        border-bottom: 1px solid #f4f4f4;

        .van-checkbox {
            padding-left: 5px;
            background-color: #fff;
        }

        .van-card {
            flex: 1;

            .van-card__price {
                color: red;
            }
        }

        .van-stepper {
            position: absolute;
            right: 50px;
            bottom: 10px;
        }
    }

    .van-submit-bar {
        background-color: #fff;
        bottom: 47px;

        .van-submit-bar__tip {
            display: flex;
            align-items: center;
        }
    }
}
</style>